<template>
  <div :class="className" :style="{height: height, width: width}" />
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import resize from './mixins/resize';

const className = ref('chart');
const width = ref('100%');
const height = ref('350px');
const autoResize = ref(true);
const chartData = ref(null);
let chart = null;

watch(chartData, (val) => {
  if (chart) {
    setOptions(val);
  }
}, { deep: true });

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (!chart) {
    return;
  }
  chart.dispose();
  chart = null;
});

function initChart() {
  chart = echarts.init(document.querySelector('.chart'), 'macarons');
  setOptions(chartData.value);
}

function setOptions(data) {
  if (!data || !data.expectedData || !data.actualData) {
    return;
  }

  const { expectedData, actualData } = data;

  chart.setOption({
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {
      data: ['expected', 'actual']
    },
    series: [{
      name: 'expected',
      itemStyle: {
        normal: {
          color: '#FF005A',
          lineStyle: {
            color: '#FF005A',
            width: 2
          }
        }
      },
      smooth: true,
      type: 'line',
      data: expectedData,
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: 'actual',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3888fa',
          lineStyle: {
            color: '#3888fa',
            width: 2
          },
          areaStyle: {
            color: '#f3f8ff'
          }
        }
      },
      data: actualData,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }]
  });
}
</script>
